import React, { Component } from 'react';
import './Mine.scss'
import { NavBar} from 'antd-mobile'
import { FolderOutline, RightOutline,BankcardOutline,TruckOutline,TextOutline,CalendarOutline } from 'antd-mobile-icons'
import { connect } from 'react-redux'


class Mine extends Component {
    constructor(props){
        super(props)
        this.state={
            userinfo : JSON.parse(localStorage.getItem('userinfo')) ? JSON.parse(localStorage.getItem('userinfo')) : {},
            list:['会员中心','领劵中心','我的评价','收货地址','我的客服']
        }
    }
    goCollection(){
        this.props.history.push('/collection')
    }

    render() {
        const right = (
            <div style={{ fontSize: 24 }} onClick={()=>{this.props.history.push('/Regsiter')}}>
                注册
            </div>
          )
        return (
            <div className='mine'>
                <div className='title'>
                    <NavBar right={right} onBack={this.back}></NavBar>
                    <div className='user'>
                        <div className='imgBox'>
                            
                            <img src={(this.state.userinfo.userinfo ? this.state.userinfo.userinfo.avatarUrl:'')} alt="" />
                        </div>
                        <div className='name'>
                            警号：{(this.state.userinfo.userinfo ? this.state.userinfo.userinfo.id :'')}
                        </div>
                    </div>
                </div>
                {/* 收藏栏 */}
                <div className='collectionss'>
                    <div className='box' onClick={()=>{this.goCollection()}}>
                        <span>{(this.props.collectionLists ? this.props.collectionLists.length : 0)}</span>
                        <div>收藏</div>
                    </div>
                    <div className='box'>
                        <span>0</span>
                        <div>积分</div>
                    </div>
                    <div className='box'>
                        <span>0</span>
                        <div>优惠卷</div>
                    </div>
                </div>
                {/* 订单栏 */}
                <div className='order'>
                    <div className='top'>
                        <h2>我的订单</h2>
                        <div>
                            <span>查看全部订单</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='eachItemList'>
                        <div className='eachItem'>
                            <BankcardOutline />
                            <div>待付款</div>
                        </div>
                        <div className='eachItem'>
                        <CalendarOutline />
                            <div>待发货</div>
                        </div>
                        <div className='eachItem'>
                        <TruckOutline />
                            <div>已发货</div>
                        </div>
                        <div className='eachItem'>
                            <TextOutline /> 
                            <div>待评价</div>
                        </div>
                    </div>
                </div>
                {/* 列表 */}
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <div key={index} className="list">
                                <div>
                                    <span>{item}</span>
                                    <RightOutline />
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}


export default connect(
    (state)=>{
        return {
            collectionLists:state.collections 
        }
    }
)(Mine)